// @ts-ignore
import './index.css'

import {Component} from "react";
import {withRouter} from "react-router-dom";
import {Row, Col, Card, Button, message, Form, Input} from 'antd';

import LazyIcon from "../Tools/Icon";

import {send, URL} from '../../utils/http.util.tsx'
import {setPrincipal} from '../../utils/auth.util.tsx'
import {nth} from "../../utils/util.tsx"

import {name} from '../../assets/settings.json'

interface FormData {
    id: string,
    name: string;
    secret: string;
}

/**
 * Description: 首页组件.
 *
 * @author <a href="mailto:scorpio.caplike@gmail.com">LiKe</a> @ 2025-03-07 18:02:51
 */
class Index extends Component<
    any,
    {
        loading: boolean,
        afterLoginSuccess: Function,
    }
> {

    state = {
        loading: false,
        afterLoginSuccess: () => this.props.history.replace('/dashboard') // - 跳转至系统
    }

    handleLogin(data: FormData) {
        this.setState({loading: true})

        send(URL.login, data).then(resp => {
            if (resp.data.httpCode === 200) {
                const adminInfo = resp.data.data;
                if (adminInfo) {
                    message.success("登录成功，跳转中···").then(() => {
                        setPrincipal(
                            {
                                id: adminInfo.id,
                                name: adminInfo.name,
                                nickname: adminInfo.nickname,
                                token: adminInfo.token,
                                since: Date.now()
                            }
                        ) // - 设置用户数据到 LocalStorage
                        this.state.afterLoginSuccess()
                    })
                } else {
                    message.error('用户名或密码错误').then(() => this.setState({loading: false}));
                }
            }
        }).catch(error => {
            message.error(error.message).then(nth)
        })
    }

    render() {
        return (
            <div className="panel">
                <Row justify="center" align="middle" className="login-row">
                    <Col className="login-col">
                        <Card title={name}>
                            <Form labelAlign="right" labelCol={{span: 5}} autoComplete="off" initialValues={{remember: true}} onFinish={(data: FormData) => this.handleLogin(data)}>
                                <Form.Item label="用户名" name="name" rules={[{required: true, message: '请输入用户名'}]}>
                                    <Input/>
                                </Form.Item>
                                <Form.Item label="密　码" name="secret" rules={[{required: true, message: '请输入密码'}, {min: 5, message: '长度至少为 5 位'}]}>
                                    <Input.Password/>
                                </Form.Item>

                                {/*<Form.Item name="remember" valuePropName="checked" wrapperCol={{offset: 18}}>*/}
                                {/*    <Checkbox>记住我</Checkbox>*/}
                                {/*</Form.Item>*/}

                                <Button block type="primary" htmlType="submit" loading={this.state.loading} icon={<LazyIcon iconName="LoginOutlined"/>}>管理员登录</Button>
                            </Form>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

export {Index}
export default withRouter(Index);
